<template>
    <div class="search_bar_container">
        <el-row :gutter="10" class="search_bar">
            <el-col :span="12">
                <el-row :gutter="20">
                    <el-col :span="24">
                        <div class="flex_row">
                            <div class="select_store flex_row" style="cursor: pointer;">
                                <span class="select_store_span font_black3">设备编号：</span>
                                <el-input size="mini" style="width: 250px;" placeholder="输入编号搜索"
                                    type="text" v-model="reqQuery.devno" />
                            </div>
                            <div class="ml10">
                                <el-button type="primary" size="mini" @click="searchHandle">
                                    <i class="el-icon-search"></i>
                                    <span class="ml5">搜索</span>
                                </el-button>
                                <el-button plan size="mini" @click="refreshHandle">
                                    <i class="el-icon-refresh"></i>
                                    <span class="ml5">重置</span>
                                </el-button>
                            </div>
                        </div>
                    </el-col>
                </el-row>
            </el-col>
            <el-col :span="12">
                <div class="flex_between">
                    <div></div>
                    <div class="flex_row">
                        <div class="mr20">
                            <el-button type="text" style="padding: 0;margin-top: 6px;" @click="allLogHandle"
                                icon="el-icon-tickets">开机记录</el-button>
                        </div>
                        <el-button type="primary" size="mini" @click="addHandle">
                            <i class="el-icon-plus"></i>
                            <span class="ml5">新增设备</span>
                        </el-button>
                    </div>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script setup>
import { ref, onMounted, getCurrentInstance, watch, defineProps, defineEmits, defineExpose, onUnmounted, onBeforeUnmount } from '@vue/composition-api'
import config from "@/js/conf/Config.js"
// 获取当前组件实例
const { proxy } = getCurrentInstance()
import downloadFile from "@/js/upload/DownloadFile.js"
const emit = defineEmits(['add', 'search', 'refresh']);

const reqQuery = ref({
    devno: '',
})
const store_ls = ref([])

const allLogHandle = () => {
    emit('allLog', reqQuery.value)
}

const addHandle = () => {
    emit('add')
}

const searchHandle = () => {
    if (!reqQuery.value.devno) {
        proxy.$message({
            type: 'info',
            message: '请输入设备编号'
        });
        return
    }
    emit('search', reqQuery.value.devno)
}
const refreshHandle = () => {
    reqQuery.value.devno = ''
    emit('refresh')
}

onMounted(() => { })

</script>

<style lang="scss" scoped>
.search_bar_container {
    border-radius: 4px;
}

.search_bar {
    border-bottom: 1px solid #f1f5f9;
    padding: 10px;
}

.date-box {
    height: 28px;
    border: 1px solid #dddfe2;
    border-radius: 4px;
    background-color: #fff;
    transition: all 0.3s;
}

.date-box-item {
    height: 100%;
    flex: 1;
    border-right: 1px solid #dddfe2;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s;
}

.date-box-item:last-child {
    border-right: none;
}

.date-box-item:hover:not(.active) {
    color: #3388ff;
}

.active {
    background-color: #3388ff;
    color: #fff;
}

.select_store ::v-deep .el-input__inner {
    background-color: #fff !important;
    border: 1px solid #dddfe2 !important;
    padding-left: 4px !important;
    text-align: left !important;
    border-radius: 4px !important;
    transition: all 0.3s;
}

.select_store ::v-deep .el-input__inner:hover {
    border-color: #3388ff !important;
}
</style>